<template>
	<view class="home">
		<view class="home_h4">营养师</view>
		<view class="home_t">
			<image src="../../static/images/new/top-bg.jpg" mode="widthFix"></image>
		</view>
		<view class="home_cent">
			<view class="home_cent_item yys" v-for="(item,index) in nutritionists" :key="index" >
				<view class="home_cent_l">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="home_cent_c">
					<h4>{{item.name}}</h4>
					<p>{{item.summary}}</p>
					<view class="home_cent_c_r" >
						<!-- <button>立即咨询</button> -->
						<navigator url="/pages/kefu/kefu?fixed_csr=1" class="zxun">立即咨询</navigator>
					</view>
				</view>
			</view>
		</view>
		<view class="home_list">
			
			<view class="home_list_item" v-if="kefu_message" style="border-bottom: 1px solid #f1f1f1;padding-bottom: 20upx;margin-top: 20upx;" @tap="$wanlshop.auth('/pages/kefu/kefu')">
				<view class="home_list_item_l"  >
					<image src="../../static/images/new/system.png" mode=""></image>
					<view class="home_list_item_tip" style="width: 20upx;height: 20upx;" v-if="kefu_message.status==0"></view>
				</view>
				<view class="home_list_item_r">
					<h5>每日均恒高级营养师 <text>{{$wanlshop.timeToDate(kefu_message.createtime)}}</text></h5>
					<p>{{kefu_message.message}}</p>
				</view>
			</view>
			<view class="home_list_item" v-if="messages" style="border-bottom: 1px solid #f1f1f1;padding-bottom: 20upx;margin-top: 20upx;" @click="Tomessage()">
				<view class="home_list_item_l"  >
					<image src="../../static/images/new/system.png" mode=""></image>
					<view class="home_list_item_tip" style="width: 20upx;height: 20upx;" v-if="messages.is_read==0"></view>
				</view>
				<view class="home_list_item_r">
					<h5>推送消息 <text>{{$wanlshop.timeToDate(messages.createtime)}}</text></h5>
					<p>{{messages.message}}</p>
				</view>
			</view>
			<view class="" v-if="chats.length>0">
				<view class="home_list_item" v-for="(item,index) in chats" :key="index" @click="Tochat(item.uid)">
					<view class="home_list_item_l" >
						<image :src="$wanlshop.oss(item.avatar, 35, 35, 2, 'avatar')" mode="" v-if="item.avatar"></image>
						<view class="home_list_item_tip2" v-if="item.count>0" >
							{{item.count}}
						</view>
					</view>
					<view class="home_list_item_r">
						<h5>{{item.nickname}} <text>{{$wanlshop.timeToDate(item.createtime)}}</text></h5>
						<p v-if="item.type==2"> 图片</p>
						<p v-else> {{item.message}}</p>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			    nutritionists:[],
				messages:[],
				chats:[],
				kefu_message:[],
			}
		},
		onShow() {
			this.loadData();
		},
	
		methods: {
			async loadData() {
				this.$api.get({
					url: '/wanlshop/nutrition/nutrition',
					data: {
					},
					success: res => {
						console.log(res);
						this.nutritionists=res.nutritionists;
						this.messages=res.messages;
						this.chats=res.chats;
						this.kefu_message=res.kefu_message;
					},
				});
			},
			Tochat(uid){
				uni.navigateTo({
					url: '/pages/nutrition/chat?uid=' + uid
				});
			},
			Tomessage(){
				uni.navigateTo({
					url: '/pages/nutrition/message'
				});
			},
		}
	}
</script>
<style>
	page{
		background: #fafafa;
		min-height: 100%;
	}
</style>
<style lang="scss" scoped>
	
.home_t{
	height: auto;
	overflow: hidden;
	image{
		width: 100%;
		height: auto;
	}
}
.home_h4{
	position: fixed;
	left: 0;
	height: 80upx;
	top: 0;
	font-size: 32upx;
	font-weight: 400;
	color: #FFFFFF;
	z-index: 99;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
	
}
.yys{
	box-shadow:0px 15px 10px -15px #CCCCCC;
}
.home_cent{
	height: auto;
	overflow: hidden;
	margin-top: -420upx;
	position: relative;
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
	.home_cent_item{
		display: flex;
		justify-content: space-between;
		width: 690upx;
		padding: 20upx;
		box-sizing: border-box;
		height: 247upx;
		background: #fff;
		border-radius: 6upx;
		margin: 0 auto 24upx auto;
		.home_cent_l{
			width: 148upx;
			height: 204upx;
			border-radius: 10upx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.home_cent_c{
			width: 480upx;
			h4{
				font-size: 32upx;
				font-weight: 500;
				color: #010101;
			}
			p{
				font-size: 22upx;
				font-weight: 400;
				color: #7F7F7F;
				line-height: 30upx;
				margin-top: 19upx;
				height: 60upx;
			}
			.home_cent_c_r{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 26upx;
				.zxun{
					width: 142upx;
					height: 60upx;
					line-height: 58upx;
					border: 1px solid #FF6400;
					border-radius: 30upx;
					font-size: 24upx;
					font-weight: 400;
					color: #FF6400;
					padding: 0;
					margin: 0;
					text-align: center;
				}
			}
		}
	}
}
.home_list{
	height: auto;
	overflow: hidden;
	.home_list_item{
		width: 690upx;
		height: auto;
		overflow: hidden; 
		display: flex;
		justify-content: space-between;
		margin: 0 auto 80upx auto;
		align-items: center;
		.home_list_item_l{
			width: 88upx;
			height: 88upx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.home_list_item_tip{
				position: absolute;
				right: 0upx;
				top: 0;
				background: #F91A1A;
				border-radius: 50%;
				font-size: 16upx;
				font-weight: 400;
				color: #FFFFFF;
				border:1px solid #fff;
				text-align: center;
				
			}
			.home_list_item_tip2{
				position: absolute;
				right: -6upx;
				top: 0;
				background: #F91A1A;
				border-radius: 50%;
				font-size: 16upx;
				font-weight: 400;
				color: #FFFFFF;
				border:1px solid #fff;
				text-align: center;
				min-width: 30upx;
				min-height: 30upx;
				
			}
		}
		.home_list_item_r{
			width: 582upx;
			height:auto;
			h5{
				font-size: 30upx;
				font-weight: 500;
				color: #000000;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 22upx;
					color: #9F9F9F;
				}
			}
			p{
				font-size: 22upx;
				font-weight: 400;
				color: #9F9F9F;
				margin-top: 10upx;
			}
		}
	}
	
	// <view class="home_list_item">
	// 	<view class="home_list_item_l">
	// 		<image src="../../static/images/bank/CITIC.png" mode=""></image>
	// 		<view class="home_list_item_tip">
	// 			13
	// 		</view>
	// 	</view>
	// 	<view class="home_list_item_r">
	// 		<h5>推送消息 <text>4月12日</text></h5>
	// 		<p>富贵日常服饰已分享，有兴趣的话去看看吧~</p>
	// 	</view>
	// </view>
}
</style>
